<script setup>
import { computed, reactive, ref } from 'vue';



// 定义一个变量
const username = "王庆波";
// 响应变量
const pwd = ref("123456");

const book = reactive({bookName:"vue开发"});

// 修改密码函数
function updatePwd()
{
    pwd.value = "1234567890";
}

// 指令
const vStr1 = "<h1>这是一段文字</h1>";
const vStr2 = "<h1>这是一段文字</h1>";
const usernameTip = "请输入用户名";
const pwdTip = "请输入一个长度不少于8位的密码";

// 双击密码
function showPwdInfo()
{
    alert("你双击了密码框！");
}


</script>

<template>
显示定义的变量名：{{username}} <br>
密码：{{ pwd }} <br>
<button @click="updatePwd">修改密码</button> <br>
书的名称：{{ book.bookName }} <br>
<hr>
v-text渲染：<p v-text="vStr1"></p> <br>
v-html渲染：<p  v-html="vStr2"></p> <br>


</template>

<style>

</style>